import { Component,ViewChild } from '@angular/core';
import { App,Platform,Keyboard,NavController,AlertController,Tabs } from "ionic-angular";
import { NativeStorage } from '@ionic-native/native-storage'; 

import { AlertsPage } from '../alerts/alerts';
import { FavoritesPage } from '../favorites/favorites';
import { HomePage } from '../home/home';
import { MessagesPage } from '../messages/messages';
import { MorePage } from '../more/more';
import { MypostPage } from '../home/mypost/mypost'
import { PostlistPage } from '../more/postlist/postlist'
import { LoginPage } from '../login/login';
@Component({
  selector:'page-tabs',
  templateUrl: 'tabs.html'
})
export class TabsPage {
  @ViewChild('myTabs') tabRef: Tabs;
  level = 1;
  tab1Root = HomePage;
  tab2Root = AlertsPage;
  tab3Root = FavoritesPage;
  tab4Root = MessagesPage;
  tab5Root = MorePage;
  tab6Root = MypostPage;
  tab7Root = PostlistPage;
  loading:any;
  constructor(
    private navCtrl: NavController,
    private platfrom:Platform,
    private keyboard:Keyboard,
    private app:App,
    private alertCtrl:AlertController,
    private storage:NativeStorage,
  ) {
    let elem = document.querySelectorAll(".tab-button");
    platfrom.ready().then(() => {
        this.registerHideKeyboard()
        elem[1]['style'].display = 'flex';
        elem[2]['style'].display = 'flex';
        elem[3]['style'].display = 'none';
        elem[4]['style'].display = 'none';
        this.storage.getItem('level').then(res=>{
            this.level = res
            let elem = document.querySelectorAll(".tab-button");
            if(res==3||res==2){
              elem[1]['style'].display = 'none';
              elem[2]['style'].display = 'none';
              elem[3]['style'].display = 'flex';
              elem[4]['style'].display = 'flex';
            }else{
              elem[1]['style'].display = 'flex';
              elem[2]['style'].display = 'flex';
              elem[3]['style'].display = 'none';
              elem[4]['style'].display = 'none';
            }
        })
        
    })
  }
  alertb(title,subTitle){
    let alert = this.alertCtrl.create({
        title: title,
        subTitle: subTitle,
        buttons: ['OK']
    });
    alert.present();
  }
  ionViewWillEnter(){
    let elem = document.querySelectorAll(".tab-button");
    this.storage.getItem('level').then(res=>{
        this.level = res
        if(res==3){
          elem[1]['style'].display = 'none';
          elem[2]['style'].display = 'none';
          elem[3]['style'].display = 'flex';
          elem[4]['style'].display = 'flex';
        }else{
          elem[1]['style'].display = 'flex';
          elem[2]['style'].display = 'flex';
          elem[3]['style'].display = 'none';
          elem[4]['style'].display = 'none';
        }
    }).catch(err=>{
      elem[1]['style'].display = 'flex';
      elem[2]['style'].display = 'flex';
      elem[3]['style'].display = 'none';
      elem[4]['style'].display = 'none';
    })
  }
  checkLogin(index:number){
    let keys = this.storage.keys();
    if(this.tabRef.getSelected().index===0){

    }else{
      this.storage.getItem('token').then((res)=>{
        this.tabRef.select(index)
      }).catch(()=>{
        this.alertb('Error','Login to access!');
        this.app.getRootNav().push(LoginPage);
        this.tabRef.select(0)
      }) 
    }
  }
  registerHideKeyboard(){
    this.platfrom.registerBackButtonAction(()=>{
        if(this.keyboard.isOpen()){
            this.keyboard.close()
            return
        }else{
          if(this.navCtrl.canGoBack()){
            this.navCtrl.pop()
          }
          
        }
    },1)
  }
}
